<template>
  <page-wrap>
    <div class="details-container">
      <div class="details-container-header">
        <div class="details-title">寄存明细</div>
        <ul class="details-main">
          <li>
            <div class="main-left">存取单号：</div>
            <div class="main-right">{{ info.itemCode }}</div>
          </li>
          <li v-if="info.state === '0' || info.state === '2' || info.state === '3'
              ">
            <div class="main-left">领取桌号：</div>
            <div class="main-right">{{ info.roomName }}</div>
          </li>
          <li>
            <div class="main-left">寄存位置：</div>
            <div class="main-right">{{ info.storePostionName }}</div>
          </li>
          <li>
            <div class="main-left">会员姓名：</div>
            <div class="main-right">{{ info.memberName }}</div>
          </li>
          <li>
            <div class="main-left">会员手机号：</div>
            <div class="main-right">{{ info.memberMobile }}</div>
          </li>
          <li>
            <div class="main-left">寄存时间：</div>
            <div class="main-right">
              {{ dayjs(info.storeDate).format('YYYY-MM-DD') }}
              {{ dayjs(info.storeDate).format('HH:mm:ss') }}
            </div>
          </li>
          <li v-if="info.state === '2'">
            <div class="main-left">申领时间：</div>
            <div class="main-right">
              {{ dayjs(info.applyDate).format('YYYY-MM-DD') }}
              {{ dayjs(info.applyDate).format('HH:mm:ss') }}
            </div>
          </li>
          <li v-if="info.state === '4'">
            <div class="main-left">过期时间：</div>
            <div class="main-right">
              {{ dayjs(info.rejectDate).format('YYYY-MM-DD') }}
              {{ dayjs(info.rejectDate).format('HH:mm:ss') }}
            </div>
          </li>
          <li v-if="info.state === '3'">
            <div class="main-left">领取时间：</div>
            <div class="main-right">
              {{ dayjs(info.takeDate).format('YYYY-MM-DD') }}
              {{ dayjs(info.takeDate).format('HH:mm:ss') }}
            </div>
          </li>
          <li v-if="info.state === '9'">
            <div class="main-left">拒绝时间：</div>
            <div class="main-right">
              {{ dayjs(info.rejectDate).format('YYYY-MM-DD') }}
              {{ dayjs(info.rejectDate).format('HH:mm:ss') }}
            </div>
          </li>
        </ul>
      </div>
      <div class="details-container-people">
        <div class="details-title">操作人员</div>
        <ul class="details-main">
          <li>
            <div class="main-left">当前状态：</div>
            <div class="main-right" :style="stateClass">
              {{ info.stateName }}
            </div>
          </li>
          <li>
            <div class="main-left">存酒操作人：</div>
            <div class="main-right" >
              {{ info.crUser || '-- --' }}
            </div> 
          </li>
          <li>
            <div class="main-left">审核操作人：</div>
            <div class="main-right" v-if="info.stateName === '已充公' ||
              info.stateName === '已拒绝' ||
              info.stateName === '已领取' ||
              info.stateName === '已过期' ||
              info.stateName === '已寄存' ">
              {{ info.edUser }}
            </div>
            <div class="main-right" v-if="info.stateName === '待领取' || info.stateName === '待寄存'">
              -- --
            </div>
          </li>
          <li v-if="info.stateName !== '已过期'">
            <div class="main-left">操作时间：</div>
            <div class="main-right" v-if="info.stateName === '已充公' ||
              info.stateName === '已拒绝' ||
              info.stateName === '已领取' ||
              info.stateName === '已寄存'
              ">
              {{ dayjs(info.edDate).format('YYYY-MM-DD') }}
              {{ dayjs(info.edDate).format('HH:mm:ss') }}
            </div>
            <div class="main-right" v-if="info.stateName === '待领取' || info.stateName === '待寄存'">
              -- --
            </div>
          </li>
        </ul>
      </div>
      <div class="details-container-product">
        <div class="details-title">商品信息</div>
        <ul class="details-main">
          <li v-if="info.goods">
            <div class="main-left">{{ info.goods.goodsName }}</div>
            <div class="main-right">×
              <span v-if="info.goods.state != '2' && info.goods.state != '5' && info.goods.state != '3'">{{
              info.goods.currentQty }}</span>
              <span v-if="info.goods.state == '3' || info.goods.state == '2'">{{ info.goods.takeQty }}</span>
              <span v-if="info.goods.state == '5'">{{ info.goods.recoveryQty }}</span>
            </div>
          </li>
          <div class="img-list">
            <z-image size="101" :src="item" v-for="(item, index) in imgsArray" :key="index"
              style="border-radius: 4px" />
          </div>
        </ul>
      </div>
      <div class="details-container-footer">
        <z-button bold top="30" style="margin-bottom: 18px" v-if="info.stateName === '已过期'"
          @click="openPopup(info.state)">延期</z-button>
        <z-button bold top="30" style="margin-bottom: 18px" v-if="info.stateName === '已充公'"
          @click="openPopup(info.state)">撤销充公</z-button>
        <z-button bold top="30" style="margin-bottom: 18px" @click="openPopup(info.state)"
          v-if="info.stateName === '待寄存'">确认寄存</z-button>
        <z-button bold top="30" style="margin-bottom: 18px" @click="openPopup(info.state)"
          v-if="info.stateName === '待领取'">确认领取</z-button>
      </div>
    </div>
  </page-wrap>
  <!-- 延期弹窗 -->
  <z-popup v-model:show="winePopup" style="overflow: 'hidden'" :title="popupTitle">
    <div class="popup-container" style="min-width: 300px">
      <div class="popup-main">
        <div class="popup-main-extension">
          <div>确认{{ popupContent }}？</div>
        </div>
        <div class="popup-main-extensionDay" v-if="info.state === '4'">
          <div class="popup-item-title">延期天数</div>
          <van-field v-model="btnForm.delayDay" placeholder="请输入天数" type="number" />
          <div class="popup-item-icon">天</div>
        </div>
      </div>
      <div class="popup-footer">
        <z-button-group class="button-group">
          <z-button @click="onCancel" plain style="width: 120px">取消</z-button>
          <z-button @click="onSubmit" style="width: 120px">确定</z-button>
        </z-button-group>
      </div>
    </div>
  </z-popup>
</template>

<script setup>
import { reactive } from 'vue'
import Api from '@/api'
import dayjs from 'dayjs'
import { showToast } from 'vant'

const route = useRoute()
const router = useRouter()

const info = ref({}) // 数据
// 参数表单
const postForm = reactive({
  itemCode: route.query.itemCode,
  isTake: route.query.isTake,
  source: route.query.source
})
const imgsArray = ref([]) // 图片数组
// 样式
const stateClass = computed(() => {
  if (
    info.value.stateName === '已充公' ||
    info.value.stateName === '已过期' ||
    info.value.stateName === '已拒绝'
  ) {
    return 'color: #ff3333;'
  }
  if (
    info.value.stateName === '待寄存' ||
    info.value.stateName === '待领取' ||
    info.value.stateName === '已领取'
  ) {
    return 'color: #ffaa00;'
  }
})
// --------------------------------------------底部按钮------------------------------------------
// 弹窗
const winePopup = ref(false) // 是否显示弹窗
// const inpValue2 = ref('') // 输入的天数
const popupTitle = ref('') // 弹窗标题
const popupContent = ref('') // 弹窗内容
const btnForm = reactive({
  itemCode: '', // ID
  state: '', // 待寄存 = 0,已寄存 = 1,待领取 = 2,已领取 = 3,已过期 = 4,已充公回收 = 5,已拒绝 = 9
  opType: '', // 操作类型(1:状态 2:延长天数)
  delayDay: '', // 延期天数
  userName: ''
})
// 打开弹窗
const openPopup = state => {
  btnForm.itemCode = info.value.itemCode
  btnForm.userName = info.value.edUser
  winePopup.value = true
  popupTitle.value = '提示'
  switch (state) {
    case '4': // 已过期
      popupTitle.value = '延期'
      popupContent.value = '延期'
      btnForm.opType = 2
      break
    case '5': // 已充公
      popupContent.value = '撤销充公'
      btnForm.opType = 3 // 撤销充公
      break
    case '0': // 待寄存
      popupContent.value = '寄存'
      btnForm.opType = 1
      btnForm.state = 1
      break
    case '2': // 待领取
      popupContent.value = '领取'
      btnForm.opType = 1
      btnForm.state = 3
      break

    default:
      break
  }
}
// 取消
const onCancel = () => {
  winePopup.value = false
}
// 确定
const onSubmit = () => {
  if (btnForm.opType === 2) {
    // 延期时间应存在并且为整数
    if (btnForm.delayDay < 1 || !Number.isInteger(Number(btnForm.delayDay))) {
      showToast('延期时间应为整数')
      return
    }
  }
  if (btnForm.opType === 3) {
    // 撤销充公
    const OpWineStore = Api.Common.AppObjProcess.Do({
      functionName: 'opRevokeRecovery',
      contentData: btnForm
    }).then(res => {
      showToast(res.result)
      winePopup.value = false
      router.push('/onwine') // 直接跳回去数据还没更新
    })
  } else {
    const OpWineStore = Api.Common.AppObjProcess.Do({
      functionName: 'OpWineStore',
      contentData: btnForm
    }).then(res => {
      showToast(res.result)
      winePopup.value = false
      router.push('/onwine') // 直接跳回去数据还没更新
    })
  }
}

// ----------------------------------------------初始化---------------------------------------------
const onInit = () => {
  imgsArray.value = []
  info.value = {}
  Api.Common.AppObjProcess.Do({
    functionName: 'getWineStoreTakeDetail',
    contentData: postForm
  }).then(res => {
    info.value = res
    console.log(res);
    let arr = info.value.attachment.split(',') // 切割字符串成数组
    imgsArray.value = arr.map(item => import.meta.env.VITE_DOMAIN + item) // 给每个元素拼接路径
  })
}
onInit()
</script>

<style scoped lang="scss">
.details-container {
  padding: 0 12px;

  li {
    list-style: none;
    padding-bottom: 12px;
    display: flex;
    align-items: center;
  }

  .details-title {
    padding: 30px 0 20px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #ffffff;
    line-height: 16px;
  }

  .details-main {
    background: #28282e;
    border-radius: 8px;
    padding: 12px 12px 0px;
  }

  .main-left {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #cccccc;
    line-height: 14px;
  }

  .main-right {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #fefefe;
    line-height: 14px;
  }

  .details-container-header {}

  .details-container-people {}

  .details-container-product {
    li {
      justify-content: space-between;

      .main-left {
        color: #fefefe;
      }
    }

    .img-list {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      padding-bottom: 12px;
      padding-top: 8px;

      ::v-deep(.van-icon__image) {
        border-radius: 4px;
      }

      ::v-deep(.van-image__error) {
        border-radius: 4px;
      }
    }
  }

  .details-container-footer {}
}

.popup-container {
  padding: 30px 24px 20px;

  .popup-main {
    .popup-main-extension {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 16px;
      text-align: center;
      margin-bottom: 27px;
    }

    .popup-main-extensionDay {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      margin-bottom: 30px;
    }

    .popup-item-title {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #cccccc;
      line-height: 16px;
      margin-right: 10px;
    }

    .popup-item-icon {
      position: absolute;
      right: 15px;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #cccccc;
      line-height: 16px;
    }

    ::v-deep(.van-field) {
      padding: 0;
      width: 180px;
      background: #5c5c66;
      border-radius: 4px;
    }

    ::v-deep(.van-field__control) {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 16px;
      padding: 10px 0 10px 12px;
      background: #5c5c66;
    }

    ::v-deep(.van-field__body) {
      background: #5c5c66;
    }

    ::v-deep(.van-cell:after) {
      display: none;
    }
  }

  .popup-footer {
    .button-group {
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
